<template>
	<view>
		<statusBar bgColor="#ffffff"></statusBar>
		<view class="searchBar">
			<text class="iconfont icon-back" @tap="pBack"></text>
			<text class="iconfont icon-search"></text>
			<input type="text" placeholder="请输入课程" placeholder-style="color:#a9b0ba" v-model="rmdFilter.key" />
			<button type="default" @tap="search">搜索</button>
		</view>
		<screen-bar :isFiexd="false" :top="0" :cntHeight="top"></screen-bar>
		<scroll-view scroll-y="true" :style="{'height':top+'px'}" @scrolltolower="getData">
			<view class="listBox">
				
				<good-list v-if="searchList.length>0" :goodData="searchList"></good-list>
				<emptyBox v-if="searchList.length<1"></emptyBox>
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	import ttBar from "@/components/ttBar/ttBar.vue";
	import goodList from "@/components/goodList/goodList.vue";
	import emptyBox from "@/components/emptyBox/emptyBox.vue";
	import screenBar from "@/pagesA/components/screenBar3/screenBar3.vue";
	import statusBar from "@/components/statusBar/statusBar.vue";
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	export default {
		components:{ttBar,goodList,emptyBox,screenBar,statusBar},
		computed:{
			...mapState({
				locationCity:state=>state.map.locationCity,
				selectCity:state=>state.map.selectCity,
				roads: state => state.map.roads,
			})
		},
		
		data() {
			return {
				top: uni.getSystemInfoSync().screenHeight-uni.getSystemInfoSync().statusBarHeight-uni.upx2px(168),
				hasNext:true,
				searchText:'',
				searchList:[],
				rmdFilter: {
					key:'',
					page_no: 1,
					page_size: 10,
					areaId: 0
				},
			};
		},
		methods:{
			getData(){
				
				if(this.hasNext){
					this.$store.dispatch("apiSearchGood",this.rmdFilter)
					.then(res=>{
						this.rmdFilter.page_no = res.data.data.nextPage;
						this.hasNext=res.data.data.hasNext;
						this.searchList=this.searchList.concat(res.data.data.items);
					})
				}else{
					uni.showToast({
						title: '没有更多数据了',
						icon: 'none'
					});
				}
				
				
			},
			search(){
				this.searchList=[];
				this.page_no=1;
				this.page_size=10;
				this.hasNext=true;
				this.getData();
			}
		},
		onLoad(cfm) {
			this.rmdFilter.key=cfm.text;
			this.rmdFilter.areaId = this.selectCity.cityCode;
			this.getData();
			
			// 监听区域选择
			uni.$on("changeArea3", payload => {
				this.searchList = [];
				this.rmdFilter.page_no = 1;
				this.hasNext = true;
				this.rmdFilter.areaId = payload.areaId
				delete this.rmdFilter.streetId
				this.getData();
			})
			// 监听商圈选择
			uni.$on("changeStreet3", payload => {
				this.searchList = [];
				this.rmdFilter.page_no = 1;
				this.hasNext = true;
				this.rmdFilter.streetId = payload.streetId,
				this.rmdFilter.areaId = payload.areaId.toString().substr(0, 4)
				this.getData();
			})
			// 监听距离排序
			uni.$on("rankChange3", payload => {
				this.searchList = [];
				this.rmdFilter.page_no = 1;
				this.hasNext = true;
				if (payload.type == 0) {
					delete this.rmdFilter.orderBy;
					delete this.rmdFilter.longi;
					delete this.rmdFilter.lati;
				} else {
					this.rmdFilter.orderBy = payload.type
					if (payload.type == 5) {
						this.rmdFilter.longi = this.roads.longitude;
						this.rmdFilter.lati = this.roads.latitude;
					} else {
						delete this.rmdFilter.longi;
						delete this.rmdFilter.lati;
					}
				}
				
				this.getData();
			})
			// 监听分类选择
			uni.$on("classChange3", payload => {
				this.searchList = [];
				this.rmdFilter.page_no = 1;
				this.hasNext = true;
				if (payload.type == 'firCate') {
					delete this.rmdFilter.secCate;
					delete this.rmdFilter.thirCate;
					this.rmdFilter.firCate = payload.firCate;
			
				} else if (payload.type == 'secCate') {
					delete this.rmdFilter.thirCate;
					this.rmdFilter.firCate = payload.firCate;
					this.rmdFilter.secCate = payload.secCate;
				} else {
					this.rmdFilter.firCate = payload.firCate;
					this.rmdFilter.secCate = payload.secCate;
					this.rmdFilter.thirCate = payload.thirCate;
				}
			
				this.getData();
			})
			// 监听筛选选择
			uni.$on("changeScreen3", payload => {
				this.searchList = [];
				this.rmdFilter.page_no = 1;
				this.hasNext = true;
				if (payload.hasOwnProperty('type')) {
					this.rmdFilter.type = payload.type
				} else {
					delete this.rmdFilter.type
				}
				if (payload.hasOwnProperty('percent')) {
					this.rmdFilter.percent = payload.percent
				} else {
					delete this.rmdFilter.percent
				}
				if (payload.hasOwnProperty('age')) {
					this.rmdFilter.age = payload.age
				} else {
					delete this.rmdFilter.age
				}
				if (payload.hasOwnProperty('price1')) {
					this.rmdFilter.price1 = payload.price1
				} else {
					delete this.rmdFilter.price1
				}
				if (payload.hasOwnProperty('price2')) {
					this.rmdFilter.price2 = payload.price2
				} else {
					delete this.rmdFilter.price2
				}
				this.getData();
			
			})
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.searchList=[];
				this.rmdFilter.page_no=1;
				this.hasNext=true;
				this.getData()
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less">
	page{
		background-color: #f6f6f6;
	}
	.listBox{
		padding: 18upx 0;
	}
	.searchBar {
		position: relative;
		z-index: 999999999;
		display: flex;
		height: 90upx;
		align-items: center;
		box-sizing: content-box;
		background-color: #FFFFFF;
		/* #ifdef MP */
		padding-right: 27%;
		
		/* #endif */
		.icon-back {
			font-size: 44upx;
			width: 90upx;
			height: 90upx;
			line-height: 90upx;
			text-align: center;
			color: #333333;
		}
	
		.icon-search {
			margin-right: -60upx;
			position: relative;
			z-index: 3;
			width: 60upx;
			text-align: center;
			font-size: 32upx;
			height: 90upx;
			line-height: 94upx;
			color: #a9b0ba;
		}
	
		input {
			height: 68upx;
			border-radius: 34upx;
			background-color: #efefef;
			flex: 1;
			padding-left: 60upx;
			font-size: 28upx;
		}
	
		button {
			font-size: 32upx;
			background-color: #FFFFFF;
			color: #333333;
		}
	
		button:after {
			border: none;
			outline: none;
		}
	}
</style>
